<template>
	<div class="main">
		<div class="main-header" v-if="buttons.length" style="display: flex;flex-wrap: wrap; line-height: 40px;">

			<el-input placeholder="请输入商品名称或编码或商户" style="width: 200px;margin-right: 10px;"
				v-model="searchParamCp.keyword" size="mini" clearable>
			</el-input>
			
			<!-- <el-cascader v-model="searchParamCp.cate_id" :options="catelist" placeholder="请先选择身份"
					:disabled="type !== 0 ? false : true" style="width: 200px;margin:0 10px;" :props="props"></el-cascader> -->
			<el-select v-model="searchParamCp.check_status" size="mini" placeholder="请先选择审核状态"
				style="width: 200px;margin-right: 10px;">
				<el-option v-for="(item,index) in catelist" :key="index" :label="item" :value="index">
				</el-option>
			</el-select>
			<el-select v-model="searchParamCp.status" size="mini" placeholder="请先选择上架状态"
				style="width: 200px;margin-right: 10px;">
				<el-option v-for="(item,index) in onlist" :key="item.id" :label="item.title" :value="item.id">
				</el-option>
			</el-select>
			<div style="display: flex;align-items: center;margin-right: 10px;">
				<el-checkbox v-model="searchParamCp.goods_stuff" @change="getgoods(1)">是否推荐好货</el-checkbox>
				<!-- <el-radio v-model="searchParamCp.goods_stuff" @input="getgoods(1)">是否推荐好货</el-radio> -->
			</div>
			<div style="display: flex;align-items: center;margin-right: 10px;">
				<el-checkbox v-model="searchParamCp.is_recommend" @change="getgoods(2)">是否推荐</el-checkbox>
				<!-- <el-radio v-model="searchParamCp.is_recommend" @input="getgoods(2)">是否推荐</el-radio> -->
			</div>
			<el-button type="primary" size="mini" @click="searchs()">搜索</el-button>
			<el-button size="mini" style="margin-left: 30px;" @click="reset()">重置</el-button>


			<elUploadFile style="margin-right: 10px;" v-if="info.id!==1" :title="'导入'" :auto-upload="false"
				:upload-clear="true" :show-file-list="false" @change="upload" :limit="1" :multiple="false"
				accept=".xls,.xlsx" class="ml-10">
				<el-button type="primary">导入</el-button>
			</elUploadFile>
			<el-button size="mini" type="primary" v-if="info.id!==1" @click="onAdd()">添加</el-button>
			<el-button size="mini" type="primary" v-if="info.id==1" @click="onexamine()">批量审核</el-button>
			<!-- <el-button size="mini" type="primary" v-if="info.id==1" @click="ongoods()">批量上架</el-button>
				<el-button size="mini" type="primary" v-if="info.id==1" @click="offgoods()">批量下架</el-button> -->
			<el-button size="mini" v-for="(item, index) in buttons" :key="index" :type="item.path | formatType"
				:icon="item.icon" :disabled="item.path | formatDisabled(selection)" @click="tapButton(item)">{{
						item.title }}</el-button>

		</div>
		<el-table ref="table" class="main-table" :data="goodsData" height="100%" border
			header-cell-class-name="main-table-header" @selection-change="onSelectionChange" @row-click="onRowClick">
			<el-table-column type="selection" width="39"> </el-table-column>
			<el-table-column label="所属商户" prop="store_name"></el-table-column>
			<el-table-column label="商品图片">
				<template slot-scope="{row}">
					<el-image style="width:60px;height:60px" :src="row.url" :preview-src-list="[row.url]">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column align="center" label="商品名称" prop="goods_name" />
			<el-table-column align="center" label="商品分类" prop="cate_name" />
			<el-table-column align="center" label="售价" prop="goods_price_min" />

			<!-- <el-table-column align="center" label="划线价" prop="goods_price_min" /> -->
			<el-table-column align="center" label="原价" prop="line_price_max" />
			<el-table-column align="center" label="小象成本价" prop="xiaoxiang_unit_price">
				<template slot-scope="{ row }">
					{{row.xiaoxiang_unit_price_min/100}}~{{row.xiaoxiang_unit_price_max/100}}
				</template>
			</el-table-column>
			<!-- check_status 0待审 1通过-->
			<el-table-column align="center" label="审核状态" prop="status">
				<template slot-scope="{ row }">
					<el-tag v-if="row.check_status==0">待审核</el-tag>
					<el-tag v-if="row.check_status==1" type="success">已通过</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="启用状态" prop="status">
				<!-- status状态  10上架 20下架 -->
				<template slot-scope="{ row }">
					<!-- <el-switch v-model="row.status == 20 ? false : true" @change="changestatus" >
					</el-switch> -->
					<el-switch v-model="row.status == 20 ? false : true" @change="(e)=>changestatus(e,row)"></el-switch>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" prop="status" v-if="info.id!==1">
				<template slot-scope="{ row }">
					<el-button type="primary" @click="onEdit(row)">编辑</el-button>
				</template>
			</el-table-column>
			<!-- <el-table-column align="center" label="操作" prop="status" v-else >
				<template slot-scope="{ row }">
					<el-button type="primary" :disabled="row.is_seck"  @click="setkill(row)">设为秒杀</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
			@current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
		<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" append-to-body width="800px"
			@close="onDialogClose">
			<component :killlist="killlist" :id="goodsid" :is="dialogView" @update="getGoodsData"
				:selection="selection"></component>
		</el-dialog>
		<el-dialog :title="`您选择了${this.selection.length}个商品改价, 是否继续?`" :visible.sync="dialogFormVisible" width="500px">
			<div style="display:flex;align-items: center;">
				<div style="margin-right: 10px;">百分比：</div>
				<el-input style="width: 300px;" placeholder="请输入数字" type="number" v-model="rate"></el-input>
				<div style="margin-left: 10px;">%</div>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="changeprice()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		get,
		post,
		del,
		imghttp
	} from "@/assets/js/http.js";
	import Search from "./search.vue";
	import Add from "./add.vue";
	import elUploadFile from '@/components/el-upload-file.vue';
	// import Edit from "./edit.vue";

	export default {
		name: "view-admin",
		data() {
			return {
				rate: '',
				goodsData: [],
				dialogFormVisible: false,
				selection: [],
				page: 1,
				limit: 20,
				total: 0,
				dialogVisible: false,
				dialogTitle: "",
				dialogView: "",
				searchParamCp: {
					is_recommend: null, //是否推荐 0否 1是
					goods_stuff: null, //是否推荐 0否 1是
				},
				catelist: ['待审', '通过'], //check_status审核状态0待审 1通过
				onlist: [{
					id: 10,
					title: '上架'
				}, {
					id: 20,
					title: '下架'
				}], //10上架 20下架
				searchinfo: {
					keyword: '',
					check_status: '',
					status: '',
					is_recommend: null, //是否推荐 0否 1是
					goods_stuff: null, //是否推荐 0否 1是
				},
				props: {
					label: "name",
					value: "id",
					children: "child",
					checkStrictly: true
				},
				type: '',
				info: {}, //个人信息
				id: [],
				killlist: [],
				goodsid: '',
			};
		},
		computed: {
			buttons() {
				return this.$store.state.buttons;
			}
		},
		components: {
			Add,
			Edit: () => import("./edit.vue"),
			Search,
			elUploadFile,
			kill: () => import("./kill.vue"),
		},
		mounted() {
			this.getGoodsData();
			this.getMenuData()
			this.type = this.$store.state.type
			console.log(this.$store.state.type, 'type', this.type)
			if (this.type !== 0) {
				// this.getcate()
			}
		},
		methods: {
			async getMenuData() {
				const data = await post({
					url: "/admin/index/index",
					loading: true
				});
				this.info = data.adminInfo;
				console.log(this.info, this.info.id)
			},
			getgoods(n) {
				if (n == 1) {
					console.log(this.searchParamCp.goods_stuff, 'goods_stuff')
				} else {
					console.log(this.searchParamCp.is_recommend, 'is_recommend')
				}
			},
			async getcate() {
				console.log(this.$store.state.type, 'type', this.type)
				//this.$store.state.type 1供应商，2 商家

				if (this.$store.state.type == 2 || this.type == 2) {
					const data = await get({
						url: "/admin/shop.MerchGoodsCategory/index",
						loading: true,
						params: {
							page: 1,
							limit: 999
						}
					});
					this.catelist = data.list;
				}
				if (this.$store.state.type == 1 || this.type == 1) {
					const data = await get({
						url: "/admin/shop.GoodsCategory/index",
						loading: true,
						params: {
							page: 1,
							limit: 999
						}
					});
					this.catelist = data.list;
				}
				this.searchParamCp.check_status = ""
				this.searchParamCp.status = ""
				this.searchinfo = {
					keyword: '',
					check_status: '',
					status: '',
					is_recommend: null, //是否推荐 0否 1是
					goods_stuff: null, //是否推荐 0否 1是
				}
			},
			async getGoodsData() {
				const data = await get({
					url: "/admin/shop.goods/index",
					loading: true,
					params: {
						limit: this.limit,
						page: this.page,
						...this.searchinfo,
					}
				});
				this.goodsData = data.list;
				this.total = data.total;
			},
			//重置
			reset() {
				this.searchParamCp = {
					is_recommend: null, //是否推荐 0否 1是
					goods_stuff: null, //是否推荐 0否 1是'
				}
				this.searchinfo = {
						keyword: '',
						check_status: '',
						status: '',
						is_recommend: null, //是否推荐 0否 1是
						goods_stuff: null, //是否推荐 0否 1是'
					},
					this.getGoodsData()
			},
			//搜索
			searchs() {
				this.page = 1
				this.searchinfo = {
					...this.searchinfo,
					...this.searchParamCp,
					...{
						goods_stuff:this.searchParamCp.goods_stuff==true?1:this.searchParamCp.goods_stuff==null?'':0,
						is_recommend:this.searchParamCp.is_recommend==true?1:this.searchParamCp.is_recommend==null?'':0,
					}
				}
				console.log(this.searchinfo,'this.searchinfo')
				this.getGoodsData()
			},
			onCurrentChange(index) {
				this.page = index;
				this.getGoodsData();
			},
			onAdd() {
				this.$router.push("/goods/add?goods_type=1");
			},
			onEdit(row) {
				if (this.info.id == 1) {
					return
				}
				this.$router.push({
					path: "/goods/edit",
					query: {
						id: row.id,
						goods_type: 1
					}
				});
				// this.$router.push("/goods/edit")
				// this.dialogTitle = "编辑商品";
				// this.dialogView = "Edit";
				// this.dialogVisible = true;
			},
			//秒杀
			setkill(row) {
				if (this.info.id !== 1) {
					return
				}
				this.dialogTitle = "设置秒杀商品";
				this.dialogView = "kill";
				this.dialogVisible = true;
				get({
					url: 'admin/shop.goods/getSkuByGoodsId',
					params: {
						id: row.id
					}
				}).then(res => {
					this.killlist = res.list
					console.log(res, 'data')
					this.goodsid = row.id
				})
			},
			onSearch() {
				this.dialogTitle = "搜索商品";
				this.dialogView = "Search";
				this.dialogVisible = true;
			},
			onDelete() {

				this.$confirm(
						`此操作将永久删除该${this.selection.length}个商品, 是否继续?`,
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}
					)
					.then(async () => {
						let query = "?";
						for (let i = 0; i < this.selection.length; i++) {
							const item = this.selection[i];
							if (i > 0) {
								query += "&ids[]=" + item.id;
							} else {
								query += "ids[]=" + item.id;
							}
						}
						await del({
							url: "/admin/shop.goods/del" + query,
							successTip: true,
							loading: true
						});
						this.getGoodsData();
					})
					.catch(() => {
						this.$refs.table.clearSelection();
					});
			},
			async changestatus(e, row) {
				console.log(e, row)
				//status状态  10上架 20下架
				if (row.status == 10) {
					let ids = [];
					ids.push(row.id)
					console.log(ids, 'ids')
					await post({
						url: "/admin/shop.goods/setGoodsStatus",
						data: {
							ids: ids,
							type: 1, //下架传1
						},
						successTip: true,
						loading: true
					});
					this.getGoodsData();
				} else {
					let ids = [];
					ids.push(row.id)
					console.log(ids, 'ids')
					await post({
						url: "/admin/shop.goods/setGoodsStatus",
						data: {
							ids: ids,
						},
						successTip: true,
						loading: true
					});
					this.getGoodsData();
				}
			},
			//批量下架商品、
			offgoods() {
				if (this.selection.length == 0) {
					this.$message('请先选择商品')
					return
				}
				this.$confirm(
						`此操作将下架该${this.selection.length}个商品, 是否继续?`,
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}
					)
					.then(async () => {
						let ids = [];
						this.selection.forEach(item => {
							ids.push(item.id)
						})
						console.log(ids, 'ids')
						await post({
							url: "/admin/shop.goods/setGoodsStatus",
							data: {
								ids: ids,
								type: 1, //下架传1
							},
							successTip: true,
							loading: true
						});
						this.getGoodsData();
					})
					.catch(() => {
						this.$refs.table.clearSelection();
					});
			},
			//批量上架商品、
			ongoods() {
				if (this.selection.length == 0) {
					this.$message('请先选择商品')
					return
				}
				this.$confirm(
						`此操作将上架该${this.selection.length}个商品, 是否继续?`,
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}
					)
					.then(async () => {
						let ids = [];
						this.selection.forEach(item => {
							ids.push(item.id)
						})
						console.log(ids, 'ids')
						await post({
							url: "/admin/shop.goods/setGoodsStatus",
							data: {
								ids: ids,
								// type:1,//下架传1
							},
							successTip: true,
							loading: true
						});
						this.getGoodsData();
					})
					.catch(() => {
						this.$refs.table.clearSelection();
					});
			},
			onexamine() {
				if (this.selection.length == 0) {
					this.$message('请先选择商品')
					return
				}
				this.$confirm(
						`此操作将审核该${this.selection.length}个商品, 是否继续?`,
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}
					)
					.then(async () => {
						let ids = [];
						this.selection.forEach(item => {
							ids.push(item.id)
						})
						console.log(ids, 'ids')
						await post({
							url: "/admin/shop.goods/checkGoods",
							data: {
								ids: ids
							},
							successTip: true,
							loading: true
						});
						this.getGoodsData();
					})
					.catch(() => {
						this.$refs.table.clearSelection();
					});
			},
			onSelectionChange(selection) {
				this.selection = selection;
				console.log(this.selection, 'selection')
			},
			onRowClick(row, column) {
				// console.log(row,'row', column)
				if (column.label == '启用状态') {

				} else {
					this.$refs.table.toggleRowSelection(row);
				}

			},
			onDialogClose() {
				this.$refs.table.clearSelection();
			},
			//设置有好货商品
			setPrimary() {
				this.$confirm(
						`此操作将设置${this.selection.length}个商品为好货商品, 是否继续?`,
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
						}
					)
					.then(async () => {
						console.log('set')
						try {
							this.$loading()
							await post({
								url: "/admin/shop.goods/setStuff",
								successTip: true,
								loading: true,
								data: {
									ids: this.selection.map(item => item.id)
								}
							});
							this.getGoodsData();
						} catch (err) {
							console.log(err)
						} finally {
							this.$loading().close()
						}
					})
					.catch(() => {
						this.$refs.table.clearSelection();
					});
			},
			//取消有好货商品
			canlegoods() {
				this.$confirm(
						`此操作将取消${this.selection.length}个商品为好货商品, 是否继续?`,
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
						}
					)
					.then(async () => {
						console.log('set')
						try {
							this.$loading()
							await post({
								url: "/admin/shop.goods/setStuff",
								successTip: true,
								loading: true,
								data: {
									ids: this.selection.map(item => item.id),
									type: 1,
								}
							});
							this.getGoodsData();
						} catch (err) {
							console.log(err)
						} finally {
							this.$loading().close()
						}
					})
					.catch(() => {
						this.$refs.table.clearSelection();
					});
			},
			tapButton(item) {
				if (item.path === "add") {
					this.xiaoxiang();
				} else if (item.path === "edit") {
					this.onEdit();
				} else if (item.path === "delete") {
					this.onDelete();
				} else if (item.path === "search") {
					this.onSearch();
				} else if (item.path === "daoru") {
					this.upload();
				} else if (item.path === "set") {
					this.setrecommend();
				} //设置审核为推荐商品
				else if (item.path == 'canlerecommend') {
					this.canlerecommend()
				} else if (item.path === "ongoods") {
					this.ongoods();
				} else if (item.path === "offgoods") {
					this.offgoods();
				} else if (item.path == 'set-primary') {
					this.setPrimary()
				} else if (item.path == 'canlegoods') {
					this.canlegoods()
				} else if (item.path == 'off') {
					this.opennew()
				}
			},
			//拉取小象商品
			xiaoxiang() {
				get({
					url: '/admin/shop.Goods/getXiaoXiangGoodsList',
					successTip: true,
				}).then(res => {
					this.getGoodsData();
				})
			},
			opennew() {
				this.dialogFormVisible = true
			},
			//批量改价
			changeprice() {
				try {
					console.log(this.rate,'rate',Number(this.rate))
					// return
					this.$loading()
					post({
						url: "/admin/shop.Goods/setPrice",
						successTip: true,
						loading: true,
						data: {
							ids: this.selection.map(item => item.id),
							rate: Number(this.rate),
						}
					});
					this.rate = ''
					this.getGoodsData();
					this.selection = []
				} catch (err) {
					console.log(err)
				} finally {
					this.$loading().close()
					this.dialogFormVisible = false
					this.$refs.table.clearSelection();
				}
				// this.$prompt('请输入百分比', `您选择了${this.selection.length}个商品改价, 是否继续?`, {
				// 	confirmButtonText: '确定',
				// 	cancelButtonText: '取消',
				// 	inputPattern: /^[0-9]*$/,
				// 	inputErrorMessage: '格式不正确',
				// 	inputPlaceholder: '只能输入数字'
				// }).then(({
				// 	value
				// }) => {
				// 	try {
				// 		this.$loading()
				// 		post({
				// 			url: "/admin/shop.Goods/setPrice",
				// 			successTip: true,
				// 			loading: true,
				// 			data: {
				// 				ids: this.selection.map(item => item.id),
				// 				type: 1,
				// 			}
				// 		});
				// 		this.getGoodsData();
				// 	} catch (err) {
				// 		console.log(err)
				// 	} finally {
				// 		this.$loading().close()
				// 	}
				// }).catch(() => {
				// 	this.getGoodsData();
				// });
			},
			//设置商品为推荐商品
			setrecommend() {
				this.$confirm(
						`此操作将设置${this.selection.length}个商品推荐商品, 是否继续?`,
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}
					)
					.then(async () => {
						// let query = "";
						// for (let i = 0; i < this.selection.length; i++) {
						// 	const item = this.selection[i];
						// 	if (i > 0) {
						// 		query += "[" + item.id+"]";
						// 	} else {
						// 		query += "[" + item.id+"]";
						// 	}
						// }
						this.selection.forEach(item => this.id.push(item.id))
						await post({
							url: "/admin/shop.goods/setRecommend",
							data: {
								id: this.id
							}
						});
						this.getMemberData();
						console.log(this.selection, 'this.selection', this.id)
					})
					.catch(() => {
						this.$refs.table.clearSelection();
					});
			},
			//取消商品为推荐商品
			canlerecommend() {
				this.$confirm(
						`此操作将取消${this.selection.length}个商品推荐商品, 是否继续?`,
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}
					)
					.then(async () => {
						await post({
							url: "/admin/shop.goods/setRecommend",
							loading: true,
							successTip: true,
							data: {
								id: this.selection.map(item => item.id),
								type: 1
							}
						});
						this.getMemberData();
					})
					.catch(() => {
						this.$refs.table.clearSelection();
						this.getGoodsData();
					});
			},
			//导入
			async upload({
				raw
			}) {
				console.log(raw, 'raw')
				this.$loading({
					text: '导入中 请等待...'
				})
				await imghttp({
					url: '/admin/shop.Goods/import',
					data: {
						file: raw
					},
					successTip: true
				})
				this.getGoodsData()
				this.$loading().close()
			},
		}
	};
</script>